<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ResizeSensor </title>
    <script src="../../../../libs/css-element-queries/1.0.1/ResizeSensor.js"></script>
    <style>
        #container {
            position: relative;
        }

        #content {
            background-color: #ccc;
            left: 0;
            top: 0;
            width: 300px;
            height: 300px;
            position: absolute;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var element = document.getElementById('content');
            new ResizeSensor(element, function () {
                console.log('Changed to ' + element.clientWidth);
            });

            document.getElementById('tobig').onclick = function(){
                element.style.width = `${element.offsetWidth + 1}px`;
            }
            document.getElementById('tosmall').onclick = function(){
                element.style.width = `${element.offsetWidth - 1}px`;
            }

        },
            false)
    </script>
</head>

<body>
    <button id="slide" type="button">滑动</button>
    <button id="tobig" type="button">容器加大</button>
    <button id="tosmall" type="button">容器变小</button>
    <div id="container">
        <div id="content">你好.</div>
    </div>
</body>

</html>